<template>
    <div class="content">
        <levelbar></levelbar>
        <div class="main-box">
            <el-table :data="tableData" border style="width: 100%" v-loading="loading" ref="multipleTable">
                <el-table-column prop="studentName" align="center" label="学生姓名">
                    <template scope="scope">
                        {{!scope.row.studentName ? '--' : scope.row.studentName}}
                    </template>
                </el-table-column>
                <el-table-column prop="gradeName" align="center" label="年级">
                    <template scope="scope">
                        {{!scope.row.gradeName ? '--' : scope.row.gradeName}}
                    </template>
                </el-table-column>
                <el-table-column prop="className" align="center" label="班级">
                    <template scope="scope">
                        {{!scope.row.className ? '--' : scope.row.className}}
                    </template>
                </el-table-column>
                <el-table-column prop="date" align="center" label="日期">
                    <template scope="scope">
                        {{!scope.row.dateStr ? '--' : scope.row.dateStr}}
                    </template>
                </el-table-column>
                <!-- :render-header="renderHeader" -->
                <el-table-column align="center" label="" :render-header="renderHeader">
                    <el-table-column prop="checkinTime" align="center" label="签到时间">
                        <template scope="scope">
                            {{!scope.row.checkinTime ? '--' : scope.row.checkinTime.substring(0,5)}}
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="状态">
                        <template scope="scope">
                            <!-- 0:正常;1:迟到;2:早退;-1:缺卡-2未绑卡 -->
                            {{scope.row.checkinStatus == 0 ? '正常' : scope.row.checkinStatus == 1 ? '迟到' : scope.row.checkinStatus == 2 ? '早退' :  scope.row.checkinStatus == -1 ? '缺卡':scope.row.checkinStatus == -2 ? '未绑卡':'--'}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="checkoutTime" align="center" label="签退时间">
                        <template scope="scope">
                            {{!scope.row.checkoutTime ? '--' : scope.row.checkoutTime.substring(0,5)}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="checkoutStatus" align="center" label="状态">
                        <template scope="scope">
                            {{scope.row.checkoutStatus == 0 ? '正常' : scope.row.checkoutStatus == 1 ? '迟到' : scope.row.checkoutStatus == 2 ? '早退' :  scope.row.checkoutStatus == -1 ? '缺卡':scope.row.checkoutStatus == -2 ? '未绑卡':'--'}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="isLeave" align="center" label="备注">
                        <template scope="scope">
                            {{!scope.row.isLeave ? '--' : scope.row.isLeave == 1 ? '请假' : scope.row.isLeave}}
                        </template>
                    </el-table-column>
                </el-table-column>
            </el-table>
            <div class="pagination-container" style="text-align:right">
                <el-pagination
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="listQuery.total"
                    :current-page.sync="listQuery.page"
                    :page-sizes="config.pageSizes"
                    :page-size="config.pageSize"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
import Levelbar from '../layout/Levelbar';
import TableLayout from 'components/TableLayout';
import { mapState, mapActions, mapGetters } from 'vuex';
import { studentCheckinfoReportDetail } from 'api/attendanceManage';
export default {
    name: 'attendanceMsg',
    components: {
        Levelbar,
        TableLayout
    },
    computed: {
        ...mapState({
            config: state => state.config.table
        }),
    // 全校  schoolType  0 普通学校 1 培训学校
        ...mapGetters(['schoolId', 'token', 'cardIsOpen', 'schoolType'])
    },
    data() {
        return {
            loading: false,
            tableData: [],
            listQuery: {
        // 分页
                page: 1,
                total: 0
            },
            type: null,
            timeTitle: ''
        };
    },
    created() {
        this.init();
    },
    methods: {
    // 全局获取行数
        ...mapActions(['ChangePageSize']),
    // 分页
        handleSizeChange(val) {
            this.listQuery.page = 1;
            this.ChangePageSize(val);
            this.init();
        },
        handleCurrentChange(val) {
            this.listQuery.page = val;
            this.init();
        },
        init() {
            this.loading = true;
            switch (this.$route.params.type) {
                case '正常':
                    this.type = 0;
                    break;
                case '迟到':
                    this.type = 1;
                    break;
                case '早退':
                    this.type = 2;
                    break;
                case '缺卡':
                    this.type = -1;
                    break;
                case '未绑卡':
                    this.type = -2;
                    break;
                default:
                    break;
            }
            studentCheckinfoReportDetail(
                this.$route.params.startDate,
                this.$route.params.schoolId,
                this.$route.params.attendanceTimeId,
                this.$route.params.gradeId == 'undefined'
                ? ''
                : this.$route.params.gradeId,
                this.$route.params.classId == 'undefined'
                ? ''
                : this.$route.params.classId,
                this.type,
                this.listQuery.page,
                this.config.pageSize
                )
                .then(data => {
                    this.loading = false;
                    if (data.data.content.attendanceTime.sPosition == '1') {
                        this.timeTitle = `时间段一(${data.data.content.attendanceTime.sClassStartTime} - ${data.data.content.attendanceTime.sClassEndTime})`
                    } else if (data.data.content.attendanceTime.sPosition == '2') {
                        this.timeTitle = `时间段二(${data.data.content.attendanceTime.sClassStartTime} - ${data.data.content.attendanceTime.sClassEndTime}))`
                    } else if (data.data.content.attendanceTime.sPosition == '3') {
                        this.timeTitle = `时间段三(${data.data.content.attendanceTime.sClassStartTime} - ${data.data.content.attendanceTime.sClassEndTime}))`
                    }
                    this.tableData = data.data.content.pageResult.list;
                    this.listQuery.total = data.data.content.pageResult.pagination.total;
                })
                .catch(Error => {
                    this.loading = false;
                });
        },
        renderHeader(createElement, { column }) {
            return (column.label = this.timeTitle);
        }
    }
};
</script>
<style lang="scss" scoped>
.content {
  position: relative;
  padding: 20px 20px 10px;
  $bgcolor: #fff;
  .el-tag {
    margin-left: 5px;
    background: #f9f9f9;
    color: #444;
  }
  .formBtn {
    width: 100%;
    height: 70px;
    border-top: 1px solid #dddddd;
    position: relative;
  }
  .btnPosition {
    position: absolute;
    right: 0px;
    top: 18px;
  }
  .btnPosition1 {
    font-size: 14px !important;
    color: #333;
    line-height: 35px;
  }
  .btnPositionLeft {
    position: absolute;
    left: 20px;
    top: 18px;
  }
  .footer {
    text-align: center;
    margin-top: 40px;
  }
  .footer .el-button {
    padding: 10px 40px;
  }
  .main-box{
        position: relative;
        padding: 20px;
        background: #fff;
        box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
        -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
  }
}
</style>

